import React from 'react';
import { Text, TouchableOpacity, View } from 'react-native-ui-lib';
import { commonStyles } from '../../configs/commonStyle';
import { isAndroid } from '../../configs/platform';
import { getStatusBarHeight } from 'react-native-status-bar-height';
import { Icon } from '../components';
import { Menu, MenuOption, MenuOptions, MenuTrigger, renderers } from 'react-native-popup-menu';
import { StyleSheet } from 'react-native';
import navigator from '../../utils/navigator';
import PermissionDialog from '../common/PermissionDialog';
import BasePage from '../BasePage';
import { check, PERMISSIONS, request } from 'react-native-permissions';

const { Popover } = renderers;

/**
 *  自定义标题
 */
export default class CustomHeader extends BasePage {

    constructor(props) {
        super(props);
    }

    onScanClick = async () => {
        //1.检测定位权限
        let permissionResult = await check(Platform.select({
            android: PERMISSIONS.ANDROID.CAMERA,
            ios: PERMISSIONS.IOS.CAMERA,
        })).catch(logger);
        //2.无权限，则请求获取群贤
        if (permissionResult !== 'granted') {
            permissionResult = await request(Platform.select({
                android: PERMISSIONS.ANDROID.CAMERA,
                ios: PERMISSIONS.IOS.CAMERA,
            })).catch(logger);
        }

        if (permissionResult === 'granted') {
            navigator.navigate('ScanPage');
        } else {
            this.permissionDialog.show('扫一扫需要使用相机扫描');
        }
    };

    onContactClick = async () => {
        //1.检测定位权限
        let permissionResult = await check(Platform.select({
            android: PERMISSIONS.ANDROID.READ_CONTACTS,
            ios: PERMISSIONS.IOS.CONTACTS,
        })).catch(logger);
        //2.无权限，则请求获取群贤
        if (permissionResult !== 'granted') {
            permissionResult = await request(Platform.select({
                android: PERMISSIONS.ANDROID.READ_CONTACTS,
                ios: PERMISSIONS.IOS.CONTACTS,
            })).catch(logger);
        }

        if (permissionResult === 'granted') {
            navigator.navigate('MobileBook');
        } else {
            this.permissionDialog.show('添加手机联系人需要使用通讯录权限');
        }
    };

    render() {
        return (
            <View>
                <View style={{ ...commonStyles.navBar,borderBottomWidth:1,borderBottomColor:'#F7F7F7', marginTop: isAndroid() ? getStatusBarHeight() : 0 }}>
                    <View>
                        <Text style={{ ...commonStyles.text_black_18, fontWeight: 'bold' }}>{this.props.title}</Text>
                    </View>
                    <View row centerV>
                        {/*<TouchableOpacity padding-10 onPress={() => {*/}
                        {/*    this.menu.open();*/}
                        {/*}}>*/}
                        {/*    <Icon type="AntDesign" name={'search1'} size={18} color={'#393934'} />*/}
                        {/*</TouchableOpacity>*/}
                        <View>
                            <TouchableOpacity padding-10 onPress={() => {
                                this.menu.open();
                            }}>
                                <Icon type="AntDesign" name={'pluscircle'} size={18} color={'#393934'} />
                            </TouchableOpacity>
                            <Menu
                                renderer={Popover}
                                rendererProps={{ anchorStyle: styles.anchorStyle, placement: 'bottom' }}
                                ref={r => this.menu = r}
                            >
                                <MenuTrigger />
                                <MenuOptions customStyles={optionsStyles}>
                                    <MenuOption customStyles={optionStyles}
                                        onSelect={() => navigator.navigate('SearchUser')}>
                                        <View row centerV>
                                            <Icon type="AntDesign" name={'adduser'} size={16} color={'white'} />
                                            <Text style={{ ...commonStyles.text_white, marginLeft: 10 }}>添加朋友</Text>
                                        </View>
                                    </MenuOption>
                                    <MenuOption customStyles={optionStyles} onSelect={() => this.onContactClick()}>
                                        <View row centerV>
                                            <Icon type="AntDesign" name={'mobile1'} size={16} color={'white'} />
                                            <Text style={{ ...commonStyles.text_white, marginLeft: 10 }}>手机联系人</Text>
                                        </View>
                                    </MenuOption>
                                    <MenuOption customStyles={optionStyles} onSelect={() => {
                                        navigator.navigate('StartGroupChat')
                                    }}>
                                        <View row centerV>
                                            <Icon type="AntDesign" name={'addusergroup'} size={16} color={'white'} />
                                            <Text style={{ ...commonStyles.text_white, marginLeft: 10 }}>发起群聊</Text>
                                        </View>
                                    </MenuOption>
                                    <MenuOption customStyles={optionStyles} onSelect={() => this.onScanClick()}>
                                        <View row centerV>
                                            <Icon type="AntDesign" name={'scan1'} size={16} color={'white'} />
                                            <Text style={{ ...commonStyles.text_white, marginLeft: 10 }}>扫一扫</Text>
                                        </View>
                                    </MenuOption>
                                </MenuOptions>
                            </Menu>
                        </View>

                    </View>

                </View>
                <PermissionDialog ref={r => this.permissionDialog = r} />
            </View>
        );
    }
}
const optionStyles = {
    optionTouchable: {
        underlayColor: 'transparent',
        activeOpacity: 0,
    },
    optionWrapper: {
        backgroundColor: 'transparent',
        margin: 5,
    },
    optionText: {
        color: 'black',
    },
};
const optionsStyles = {
    optionsContainer: {
        backgroundColor: 'black',
        padding: 5,
    },
    optionsWrapper: {
        backgroundColor: 'black',
    },
    optionWrapper: {
        backgroundColor: 'yellow',
        margin: 5,
    },
    optionTouchable: {
        underlayColor: 'gold',
        activeOpacity: 70,
    },
    optionText: {
        color: 'brown',
    },
};
const styles = StyleSheet.create({
    container: {
        flexDirection: 'column',
        padding: 30,
    },
    backdrop: {
        backgroundColor: 'red',
        opacity: 0.5,
    },
    anchorStyle: {
        backgroundColor: 'black',
    },
});

